<template>
    <div class="groupslist">
        <van-nav-bar
                title="群组列表"
                class="header"
                left-text=""
                left-arrow
                @click-left="backToAddress()">
            <template #right>
                <van-icon name="add-o" size="18" v-show="!tanBoxShow" @click="changeTanBoxShow()"/>
                <van-icon name="minus" size="18" v-show="tanBoxShow" @click="changeTanBoxShow()"/>
            </template>
        </van-nav-bar>
<!--        {{groupsList}}-->
        <div class="tanBox" v-show="tanBoxShow">
            <div class="tanBoxInfo" @click="addNewGroup"><van-icon name="contact" style="margin: 0 10px"/>添加群组</div>
        </div>

        <div v-if="notfound" class="notfound">
            <img src="img/notfound/notfound.png">
        </div>
        <div v-else class="botbox">
            <van-search
                    v-model="searchFriend"
                    placeholder="搜索群组"
                    input-align="center"
            />
            <div v-for="item in groupsList" :key="item.name" @click="toGroupChat(item)">
            <!-- 滑动单元格 -->
                <van-swipe-cell>
                <van-cell :border="false">
                    <div class="groupsListItem">
                        <div style="height:100%;">
                            <img style="height:100%;padding: 0.5rem" src="img/headimg/head_icon.png" alt />
                        </div>
                        <div style="height:100%;display:flex;flex-direction:column;margin-left:1rem;">
                            <div style="flex:1;font-size:1rem;display:flex;align-items:center;">群名：{{ item.name }}</div>
                        </div>
                        <div style="margin-left:auto;">创建时间：{{ item.time }}</div>
                    </div>
                </van-cell>
                <template #right>
                    <van-button style="height:100%" square type="info" text="编辑"/>
                    <van-button style="height:100%" square type="danger" text="删除" @click="deleteGroup(item.id)"/>
                </template>
            </van-swipe-cell>
            </div>
        </div>


        <div class="btnBox">
            <van-popup v-model="showGroup">
                <h4>添加群组</h4>
                <div class="botbox">
                    <van-form label-width="100" label-align="center">
                        <van-cell-group inset>
                            <van-field required clickable v-model="group.name" label="群组姓名" placeholder="请输入群组姓名" />
                        </van-cell-group>
                        <van-cell-group inset>
                            <van-field label="群组成员" required>
                                <template #input>
                                    <van-checkbox-group v-model="checked" res="checkboxGroup" style="height:10rem; overflow-y: auto;">
                                        <div v-for="(item,index) in selectDataOpts" :key="item.id" role="button" :tabindex="index" class="van-cell van-cell--clickable van-dropdown-item__option">
                                            <div class="van-cell__title">
                                            <span>
                                                <van-checkbox :name="item.id" checked-color="#A9B910" v-model="item.checked">{{ item.name }}</van-checkbox>
                                            </span>
                                            </div>
                                        </div>
                                    </van-checkbox-group>
                                </template>
                            </van-field>
                        </van-cell-group>
                        <van-cell-group inset>
                            <van-field clickable v-model="group.note" label="群组备注" placeholder="群组备注" />
                        </van-cell-group>

                        <div style="margin: 16px;">
                            <van-button round block class="btn_grey"  @click="onSubmitGroup">提交群组</van-button>
                        </div>
                    </van-form>
                </div>
            </van-popup>
        </div>
        <!-- 下部选项条 -->
    </div>
</template>
<script>
    import { Checkbox, CheckboxGroup, DropdownMenu, DropdownItem } from 'vant'
    import {Toast} from 'vant'
    export default {
        data() {
            return {
                tanBoxShow:false,
                searchFriend:'',

                groupsList: [],
                notfound:true,

                checked:[],
                showGroup:false,
                selectDataOpts:[],
                group:{
                    name:'',
                    note:'',
                    people:''
                }
            }
        },
        methods: {
            goBackPage(url){
                this.$router.push(url);
            },
            changeTanBoxShow(){
                this.tanBoxShow=!this.tanBoxShow;
            },
            //添加群组
            addNewGroup(){
                this.showGroup=true;
                this.group={
                    name:'',
                    note:'',
                    people:''
                };
                this.getGroupList();
            },
            //添加群组
            onSubmitGroup(){
                this.group.people='';

                this.checked.forEach(v=>{
                    this.group.people=this.group.people+v+';'
                });
                if(this.group.people==''){
                    Toast.success('暂时没有选择群组成员')
                }if(this.checked.length<2){
                    Toast.fail('请至少选择两名成员')
                }
                else{
                    this.group.people=this.group.people.substring(0,this.group.people.length-1);
                    // console.log("群组人员是", this.group.people);
                    this.bb=JSON.stringify(this.group);
                    let res = $App.addCluster(JSON.stringify(this.group));
                    this.showGroup=false;
                    this.group={
                        name:'',
                        note:'',
                        people:''
                    };
                    this.getGroupsList();
                }
            },
            //查看群组所有可选人员
            getGroupList(){
                this.selectDataOpts=[];
                let res = $App.findAllPerson();
                if(JSON.parse(res)){
                    JSON.parse(res).forEach(v=>{
                        if(v.person.name != "本机"){
                            this.selectDataOpts.push({
                                id:v.person.id,
                                name:v.person.name,
                                checked:false
                            });
                        }
                        
                    })
                }
            },
            //获取所有群组
            getGroupsList() {
                this.groupsList =[];
                let res = $App.findAllCluster();
                this.groupsList = JSON.parse(res);
            
                if(this.groupsList.length){
                    this.notfound = false;
                }
            },
            backToAddress(){
                this.$router.push("/");
            },
            //删除群组
            deleteGroup(id){
                $App.delClusterById(id);
                this.getGroupsList();
            },
            //跳转群组聊天
            toGroupChat(dt){
                this.$router.push(
                    {
                        path:'/groupinfo',
                        query: {
                            id: dt.id,
                            name:dt.name
                        }
                    }
                )
            }
        },
        mounted() {
            this.getGroupsList();
        }
    }
</script>
<style scoped>
    .groupslist {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .groupslist .header{
        /* background-color: #153744; */
        /* color: #ffffff; */
         color: black;
    }
    .groupslist .tanBox{
        /* background-color: rgba(21, 55, 68, 0.71); */
        /* color: #ffffff; */
         color: black;
        position: fixed;
        top: 45px;
        z-index: 999;
        right: 5px;
        width: 8rem;
    }
    .groupslist .tanBox .tanBoxInfo{
        line-height: 30px;
        font-size: 16px;
        margin: 10px 0;
    }
    /deep/ .van-nav-bar .van-icon {
        /* color: #ffffff; */
         color: black;
    }
    /deep/ .van-nav-bar .van-nav-bar__title {
        /* color: #ffffff; */
         color: black;
    }
    /deep/ .underbox .van-tabbar-item{
        color: #999999;
    }
    /deep/ .underbox .van-tabbar-item--active {
        /* color:  #153744; */
         color: black;
        background-color: #fff;
    }
    .btnBox {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .notfound{
        display: flex;
        overflow-y: auto;
    }
    .notfound img{
        width: 100%;
        height: 100%;
    }
    /deep/ .van-popup--center{
        top: 50%;
        left: 50%;
        width: 80%;
        -webkit-transform: translate3d(-50%,-50%,0);
        transform: translate3d(-50%,-50%,0);
    }
    .btn_grey{
        background-color: #153744;
        color: #ffffff;
        /* color: black; */
        border: #153744 1px solid;
    }
    .groupsListItem {
        height: 5rem;
        display: flex;
    }
    .groupsListItem img{
        height:100%;
    }

</style>